<template>
	<view id="page_content">
		<tui-tips ref="toast" v-if="index==0"></tui-tips>
		<tui-drawer mode="right" :visible="isopen">
			<headNav @close="closeOpen" @showTips="showTips"></headNav>
		</tui-drawer>
		<view class="page affiliate_dashboard_page affiliate_page">
			<view class="page_header">
				<view class="header_center">
					<topWallet :connect="hasToken" @onOpen="openModel"></topWallet>

					<view class="golden-title"><text>我的订单</text></view>
				</view><button class="menu_btn" @click="navs('showLeft')">
					<image src="/static/images/common/menu.svg" mode="widthFix">
				</button>
			</view>

			<navigator url="/share_links" @click="showDialog">
				<view class="add_link_btn">{{$t('Generate-Link')}}</view>
			</navigator>
			<view class="bottom">
				<tui-tabs color="#f4d56f" :tabs="tabs"  :currentTab="currentTab"
					selectedColor="#f4d56f" :bold="false" sliderBgColor="#f4d56f" size="24" @change="change"
					itemWidth="25%"
					style="background: #382E19;border-top-left-radius: 30rpx;border-top-right-radius: 30rpx;height:70rpx; 20rpx;font-size: 30rpx;margin-top: -30rpx;margin-bottom: 20rpx;"></tui-tabs>
				<!--选项卡逻辑自己实现即可，此处未做处理-->
				<view :class="{'tui-order-list':scrollTop>=0}">
					<view class="tui-order-item" v-for="(model,orderIndex) in orderlist" :key="orderIndex">
						<tui-list-cell :hover="false" :lineLeft="false" class="tui-boxs">
							<view class="tui-goods-title">
								<view>订单号：{{model.order_no}}</view>
								<view class="tui-order-status" v-if="model.order_status==0">待付款</view>
								<view class="tui-order-status" v-else-if="model.order_status==1">待发货</view>
								<view class="tui-order-status" v-else-if="model.order_status==2">待收货</view>
								<view class="tui-order-status" v-else-if="model.order_status==3">待评价</view>
								<view class="tui-order-status" v-else-if="model.order_status==-1">退款中</view>

							</view>
						</tui-list-cell>
						<block v-for="(item,index) in model.order_item_list" :key="index">
							<tui-list-cell padding="0" @click="detail(item.order_id)"  class="tui-boxs">
								<view class="tui-goods-item">
									<image :src="item.picture.pic_cover_small" class="tui-goods-img"></image>
									<view class="tui-goods-center">
										<view class="tui-goods-name">{{item.goods_name}}</view>
										<view class="tui-goods-attr">{{item.sku_name}}</view>
									</view>
									<view class="tui-price-right">
										<view>{{item.price}}</view>
										<view>x{{item.num}}</view>
										<view v-if="model.payment_type==3 && model.pay_status==2" class="yui-names">余额抵扣
										</view>
										<view v-else-if="model.pay_status==2 && model.payment_type==4"
											class="yui-names">余额抵扣</view>
									</view>
								</view>
							</tui-list-cell>
						</block>
						<tui-list-cell :hover="false" unlined  class="tui-boxs">
							<view class="tui-goods-price">
								<view>共1件商品 合计：</view>
								
								<view class="tui-price-large">{{model.order_money}}</view>
								
							</view>
						</tui-list-cell>
						<view class="tui-order-btn">
							<view class="tui-btn-ml">

								<tui-button type="warning" plain width="152rpx" height="56rpx" :size="26" shape="circle"
									v-if="(model.order_status==2 || model.order_status==3) && model.third_order_sn"
									@click="logistics(model.out_trade_no)">查看物流</tui-button>
							</view>
							<view class="tui-btn-ml">
								<tui-button type="warning" plain width="152rpx" height="56rpx" :size="26" shape="circle"
									v-if="model.order_status==0" @click="detail(model.order_id)">去付款</tui-button>
								<tui-button type="warning" plain width="152rpx" height="56rpx" :size="26" shape="circle"
									v-if="model.order_status==-1" @click="detail(model.order_id)">退款中</tui-button>

								<tui-button type="warning" plain width="152rpx" height="56rpx" :size="26" shape="circle"
									v-if="model.order_status==1" @click="detail(model.order_id)">申请退款</tui-button>
								<tui-button type="warning" plain width="152rpx" height="56rpx" :size="26" shape="circle"
									v-if="model.order_status==3 && model.is_evaluate==0"
									@click="evaluate(model.order_id)">去评价</tui-button>
								<tui-button type="warning" plain width="152rpx" height="56rpx" :size="26" shape="circle"
									v-if="model.order_status==5">已失效</tui-button>

							</view>
							<view class="tui-btn-ml">
								
								<tui-button type="warning" plain width="152rpx" height="56rpx" :size="26" shape="circle"
									v-if="model.order_status==2" @click="detail(model.order_id)">确认收货</tui-button>

								<tui-button type="warning" plain width="152rpx" height="56rpx" :size="26" shape="circle"
									v-if="model.order_status==3" @click="againBuy(orderIndex)">再次购买</tui-button>

							</view>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		<!-- wallet_pop-->
		<walletPop :walletOpen="open_wallet" :walletModelOpen="open_wallet" @closeWallet="closePop"
			@showTips="showTips"></walletPop>
		<tui-tips ref="toast" position="center"></tui-tips>
		<view v-if="showTabbar">
			<tui-tabbar :current="current" @click="tabbarSwitch" backdropFilter :backgroundColor="backgroundColor"
				:tabBar="tabBar" color="#777" selectedColor="#f4d56f"></tui-tabbar>
		</view>

	</view>
</template>

<script>
	import headNav from "@/components/nav/head_nav.vue"
	import topWallet from "@/components/nav/top_wallet.vue"
	import walletPop from "@/components/nav/wallet_pop.vue"
	export default {
		components: {
			headNav,
			topWallet,
			walletPop
		},
		data() {
			return {
				showPurse: false,
				isopen: false,
				showLink: false,
				hasToken: false,
				open_wallet: false,
				teamData: '',
				current: 3,
				isList: '',
				showTabbar: true,
				backgroundColor: '#191c1d',
				tabs: [{
					name: "全部"
				}, {
					name: "待付款"
				}, {
					name: "待发货"
				}, {
					name: "待收货"
				}, {
					name: "退款/售后"
				}],
				currentTab: 0,
				pageIndex: 1,
				loadding: false,
				pullUpOn: true,
				scrollTop: 0,
				loading: '',
				loadingType: '',
				orderlist: '',
				index: 0,
				tabBar: [{
						pagePath: '/pages/dashboard/faq',
						text: this.$t('question'),
						iconPath: '/static/images/common/eb2ad3e9f15cd5c45523.svg',
						selectedIconPath: '/static/images/common/faq.png',
						verify: true
					},
					{
						pagePath: '/pages/dashboard/share_links',
						text: this.$t('Promotion-link'),
						iconPath: '/static/images/common/1c328bea0664621ae940.svg',
						selectedIconPath: '/static/images/common/2ddef14ffefdf0893c68.svg',

						verify: true
					},
					{
						pagePath: '/pages/dashboard/share_report',
						text: this.$t('Income-statement'),
						iconPath: '/static/images/common/27ef8eecf3261b27000a.svg',
						selectedIconPath: '/static/images/common/e71ec10e6a3c2f14b631.svg',
						verify: true
					},
					{
						pagePath: '/pages/dashboard/dashboard',
						text: this.$t('control-panel'),
						iconPath: '/static/images/common/e5eb47a4e075e5a7a1e6.svg',
						selectedIconPath: '/static/images/common/0713c468a0e288a09478.svg',
						verify: true
					}
				],

			};
		},
		onLoad: function() {

		},
		onShow() {
			
				this.hasToken = true;
				this.init();
			
		},
		methods: {
			change(e) {

				this.currentTab = e.index;
				this.pageIndex = 1;
				this.init();
			},
			init(type, loading) {
				uni.showLoading({
					title: 'loading'
				});

				let status = this.currentTab == 0 ? 'all' : this.currentTab - 1;
				status = status == 0 ? '0' : status;
				this.pageIndex = 1;
				let datas = {

					page: this.pageIndex,
					order_status: status,
					limit: 10,
				};

				let result = this.tui.request('api/order/orderList', 'post', datas, 1000, 1, '', 'orderList');
				Promise.resolve(result).then((value) => {
					this.loading = true;
					uni.hideLoading();
					if (value.code == 200) {
						this.orderlist = value.data.data;

					} else {
						// this.tui.toast(value.message);
					}
				})
			},
			logistics(out_order_no) {
				uni.navigateTo({
					url: "/pages/orderDetail/timeaxis?out_trade_no=" + out_order_no
				})
			},
			evaluate(e) {
				uni.navigateTo({
					url: '/pageschild/myOrder/evaluate?order_id=' + e
				})
			},
			detail(e) {
				uni.navigateTo({
					url: '/pages/shop/orderDetail?order_id=' + e
				})
			},
			againBuy(e) {

				let goodsId = this.orderlist[e].order_item_list[0]['goods_id'];

				uni.navigateTo({
					url: '/pages/productDetail/productDetail?goods_id=' + goodsId
				})
			},
			navs() {
				this.isopen = true
				this.showTabbar = false
			},
			openModel() {
				this.open_wallet = true;
			},
			closeOpen() {
				this.isopen = false
				this.showTabbar = true
			},
			goBack() {
				uni.navigateBack()
			},
			connectPurse() {
				this.showPurse = true
			},
			closePurse() {
				this.showPurse = false
			},
			showDialog() {
				this.showLink = true
			},
			closeLink() {
				this.showLink = false
			},
			closePop() {
				this.open_wallet = false;
			},
			showTips: function(msg, type) {

				let options = {
					msg: msg,
					duration: 2000,
					type: type
				};
				this.$refs.toast.showTips(options);
			},

		}
	}
</script>

<style lang="scss">
	@import '../../static/css/defalut.css';
	page {
		background-color: #0c0d13;
		// color: #fff;
		// font-family: "Barlow Semi Condensed", sans-serif;
		// // font-size: 1.3vw;
		// margin: 0;
		// padding: 0;
		// overflow: hidden;
	}
	.page_header{
		z-index:0;
	}
    .tui-boxs{
    	margin:0rpx;
    	font-size: 26rpx !important;
    	width:auto !important;
    	background: #212a36 !important;
    	color:#fff !important;
    	font-size: 24rpx !important;
    }
	.bottom {

		display: flex;
		flex: 1;
		flex-direction: column;
		 // height: calc(100vh - var(--window-top));
		width: 100%;
		background-color: #0c0d13;
	}

	.golden-title {

		color: #f4d56f;
		font-family: Barlow Semi Condensed;
		font-weight: 500;
		line-height: 56rpx;
		text-shadow: 0 4rpx 8rpx rgba(3, 3, 3, .5);
		width: 750rpx;
		text-align: center;
		font-style: italic;

	}
     .tui-order-list {
     	margin-top: 80rpx;
		margin:0rpx 20rpx;
		margin-bottom: 100rpx;
     }
     
     .tui-order-item {
     	margin-top: 0rpx;
     	border-radius: 10rpx;
		margin-bottom: 20rpx;
     	overflow: hidden;
     }
     
     .tui-goods-title {
     	width: 100%;
     	font-size: 28rpx;
     	display: flex;
     	align-items: center;
     	justify-content: space-between;
     }
     .yui-names{color:#e1b01a}
     .tui-order-status {
     	color: #888;
     	font-size: 26rpx;
     }
     
     .tui-goods-item {
     	width: 100%;
     	padding: 20rpx 30rpx;
     	box-sizing: border-box;
     	display: flex;
     	justify-content: space-between;
     }
     
     .tui-goods-img {
     	width: 180rpx;
     	height: 180rpx;
     	display: block;
     	flex-shrink: 0;
     }
     
     .tui-goods-center {
     	flex: 1;
     	padding: 20rpx 8rpx;
     	box-sizing: border-box;
     }
     
     .tui-goods-name {
     	max-width: 310rpx;
     	word-break: break-all;
     	overflow: hidden;
     	text-overflow: ellipsis;
     	display: -webkit-box;
     	-webkit-box-orient: vertical;
     	-webkit-line-clamp: 2;
     	font-size: 26rpx;
     	line-height: 32rpx;
     }
     
     .tui-goods-attr {
     	font-size: 22rpx;
     	color: #888888;
     	line-height: 32rpx;
     	padding-top: 20rpx;
     	word-break: break-all;
     	overflow: hidden;
     	text-overflow: ellipsis;
     	display: -webkit-box;
     	-webkit-box-orient: vertical;
     	-webkit-line-clamp: 2;
     }
     
     .tui-price-right {
     	text-align: right;
     	font-size: 24rpx;
     	color: #888888;
     	line-height: 30rpx;
     	padding-top: 20rpx;
     }
     
     .tui-color-red {
     	color: #E41F19;
     	padding-right: 30rpx;
     }
     
     .tui-goods-price {
     	width: 100%;
     	display: flex;
     	align-items: flex-end;
     	justify-content: flex-end;
     	font-size: 24rpx;
     }
     
     .tui-size-24 {
     	font-size: 24rpx;
     	line-height: 24rpx;
     }
     
     .tui-price-large {
     	font-size: 32rpx;
     	line-height: 30rpx;
     	font-weight: 500;
     }
     
     .tui-order-btn {
     	width: 100%;
     	display: flex;
     	align-items: center;
     	justify-content: flex-end;
     	background: #212a36;
     	padding: 10rpx 30rpx 20rpx;
     	box-sizing: border-box;
     }
     
     .tui-btn-ml {
     	margin-left: 20rpx;
     }
	.golden-title text {
		justify-content: center;
		margin-top: 2rpx;
		font-size: 48rpx
	}

	/* 商品列表*/

	.tui-product-list {
		margin: 20rpx;
		margin-top: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
		box-sizing: border-box;
		/* padding: 10rpx 0rpx; */
	}


	.tui-product-container {
		width: 49%;
		/* 	display: flex;
    	justify-content: space-between;
    	flex-wrap: wrap;
    	flex: 1; */
		margin-right: 2%;
	}

	.yui-pricebox {
		font-size: 26rpx;
		margin-left: 4rpx;
		margin-top: 4rpx;
	}

	.tui-product-container:nth-child(2n) {
		margin-right: 0;
	}


	.tui-pro-item {
		width: 100%;
		margin-bottom: 10rpx;
		background: #212a36;
		box-sizing: border-box;
		border-radius: 12rpx;
		overflow: hidden;
		transition: all 0.15s ease-in-out;
	}

	.tui-flex-list {
		display: flex;
		margin-bottom: 1rpx !important;
	}

	.tui-pro-img {
		width: 100%;
		display: block;
	}

	.tui-proimg-list {
		width: 260rpx;
		height: 260rpx !important;
		flex-shrink: 0;
		border-radius: 12rpx;
	}

	.tui-pro-content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 20rpx;
	}

	.tui-pro-tit {
		color: #777777;
		font-size: 26rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.tui-pro-price {
		padding-top: 18rpx;
		display: flex;
	}

	.tui-sale-price {
		display: flex;
		font-size: 30rpx;
		font-weight: 500;
		color: #f4d56f;
	}

	.tui-sale-prices {
		font-size: 28rpx;
		font-weight: 500;
		color: #e41f19;
	}

	.tui-factory-price {
		font-size: 24rpx;
		color: #a0a0a0;
		text-decoration: line-through;
		padding-left: 12rpx;
	}

	.tui-pro-pay {
		padding-top: 10rpx;
		font-size: 24rpx;
		color: #656565;
	}

	.affiliate_page .top_link.right .link_btn_img_box {
		width: 70rpx;
		height: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 8rpx;
		border: solid 2rpx rgba(244, 213, 111, .7);
		background-color: rgba(37, 31, 20, .5);
	}

	.affiliate_page .top_link.right .link_btn_img_box_active {
		width: 68rpx;
		height: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 8rpx;
		border: solid 2rpx rgba(255, 255, 255, .7);
		background-color: #251f14;
	}

	.affiliate_page .top_link.right .link_btn_img_box_active image {
		width: 70%;
		height: 100%;
	}

	.affiliate_page .top_link.right .link_btn_img_box image {
		width: 70%;
		height: 100%;
	}

	image {
		overflow-clip-margin: content-box;
		overflow: clip;
	}

	.buy {
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		display: flex;
		flex-direction: row;

	}

	.button_buy {
		background-color: #f4d56f;
		width: 200rpx;
	}
</style>